// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';
$brand-theme: 'mozilla';
$promo-md-mq: 1015px;
$promo-sm-mq: 400px;

@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/forms/button-container';
@import '~@mozilla-protocol/core/protocol/css/components/forms/form';
@import '~@mozilla-protocol/core/protocol/css/components/forms/field';

.moz-account-promo {
    background: $color-black;
    border-radius: $border-radius-lg;
    margin-bottom: $layout-lg;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: $spacing-lg;

    .promo-product-wrapper {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    @media (min-width: $promo-md-mq) {
        padding: $layout-lg;

        .promo-product-wrapper {
            flex-direction: row;
            @include bidi(((text-align, left, right),));
        }
    }

    h2 {
        @include font-size(56px);
        @include bidi(((text-align, left, right),));
        font-family: var(--body-font-family);
        line-height: 1;
        color: $color-white;
        letter-spacing: -2px;
        margin-bottom: $layout-md;
        text-align: left;

        .gradient-text {
            background: linear-gradient(to right, #ffd741 19%, #ff4540 42%, #f26fff 63%, #9a53fa 80%);
            background-clip: text;
            -webkit-background-clip: text; // for Chrome web browser
            color: transparent;
        }

        @media (min-width: $promo-md-mq) {
            @include font-size(66px);
        }

        @media (max-width: $promo-sm-mq) {
            @include text-title-md;
            margin-bottom: $layout-sm;
        }
    }

    .accounts-cta-wrapper {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        font-family: var(--body-font-family);

        #fxa-email-form {
            color: $color-white;
            margin-top: $spacing-xl;
            max-width: 100%;

            .mzp-c-form-header {
                display: none;
            }
        }

        .mzp-c-field-info,
        .accounts-signin {
            @include text-body-xs;
            @include bidi(((text-align, left, right),));
        }

        .mzp-c-field-info {
            margin-top: $spacing-md;
        }

        @media (min-width: $promo-md-mq) {
            align-items: flex-start;
        }
    }

    .accounts-signin,
    .accounts-cta {
        color: $color-white;
        margin-top: 0;
    }

    .accounts-signin {
        margin-bottom: 0;
    }

    .accounts-cta {
        align-self: flex-start;
        margin-top: $spacing-2xl;

        a {
            font-family: var(--body-font-family);
        }

        small {
            a {
                text-decoration: underline;
            }
        }

        @media (min-width: $promo-md-mq) {
            @include bidi(((text-align, left, right),));
            margin: 0;
        }
    }

    a:link,
    a:visited {
        color: $color-white;
    }

    a:hover,
    a:focus,
    a:active {
        color: $color-white;
    }

    .products-list {
        display: flex;
        justify-content: center;
        margin-bottom: 0;

        li {
            flex-shrink: 0;
            margin-left: 20px;

            &.product-item-firefox {
               @include bidi(((margin-left, 0, margin-right, 20px),));
            }

            &.product-item-monitor {
                @include bidi(((margin-right, 0, margin-left, 0),));
            }

            img {
                width: 45px;
                height: 45px;
                display: block;
            }

            span {
                @include visually-hidden;
            }
        }

        @media (max-width: $promo-sm-mq) {
            li {
                margin-left: 10px;

                &.product-item-firefox {
                    @include bidi(((margin-left, 0, margin-right, 10px),));
                }

                &.product-item-monitor {
                    @include bidi(((margin-right, 0, margin-left, 0),));
                }

                img {
                    width: 30px;
                    height: 30px;
                }
            }
        }

        @media (min-width: $promo-md-mq) {
            @include bidi(((margin-left, auto, 0),));
            @include bidi(((margin-right, 0, auto),));
        }
    }

    .fxa-email-field-container {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        min-width: 230px;

        .mzp-c-field {
            padding-bottom: 0;
            width: 100%;

            #fxa-email-field {
                width: 395px;
                min-width: 230px;
                max-width: 100%;
                line-height: 1;
            }
        }

        .mzp-c-button-container {
            display: flex;
            margin-bottom: 0;
            margin-top: $spacing-md;
            width: 100%;

            #fxa-email-form-submit {
                font-family: var(--body-font-family);
            }
        }


        @media (min-width: $promo-md-mq) {
           .mzp-c-button-container {
                    &::before {
                        content: none;
                    }
                }
            }
        }
    }
